<template>
  <div>
    <div style="position: relative;">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
            v-hasPermi="['hr:invoice:apply:add']"
          >新增开票
          </el-button>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-table
        class="list-table"
        v-loading="listLoading"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        style="width: 100%;">
        <!--<el-table-column type="selection" align="center" width="55"/>
        <el-table-column :show-overflow-tooltip="true" prop="id" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">编号</p>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="projectName" width="220">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">项目名称</p>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="applyDeptName" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请部门</p>
          </template>
        </el-table-column>


      <el-table-column :show-overflow-tooltip="true" prop="ourInvoiceCompanyName" width="260">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">我方开票公司</p>
          </template>
        </el-table-column>

         <!-- <el-table-column :show-overflow-tooltip="true" prop="invoiceType" width="80">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">类型</p>
          </template>
          <template slot-scope="scope">
              {{scope.row.invoiceType == 0?'普票':'专票' }}
          </template>
        </el-table-column> -->

         <el-table-column :show-overflow-tooltip="true" prop="sumMoney" align="right">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">金额</p>
          </template>
        </el-table-column>

         <el-table-column :show-overflow-tooltip="true" prop="cnt"  align="center">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发票张数</p>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="status">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | todoSalaryStateFilter" size="small">{{scope.row.status |
              todoSalaryStateFilter('text')}}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="createName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请人</p>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="createTime">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请日期</p>
          </template>
          <template slot-scope="scope">
            <div>{{scope.row.createTime | formatDate('yyyy-MM-dd')}}</div>
          </template>
        </el-table-column>

        <!-- <el-table-column :show-overflow-tooltip="true" prop="createTime"  width="180">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">填报日期</p>
          </template>
          <template slot-scope="scope">
            <div>{{scope.row.createTime | formatDate('yyyy-MM-dd')}}</div>
          </template>
        </el-table-column> -->
        <el-table-column ref="actionColumn" fixed="right" align="left" label="操作" width="160px"
                         class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button ref="actionEdit"
                       type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       v-if="scope.row.status === '0'"
                       v-hasPermi="['hr:invoice:apply:add']"></el-button>

            <el-button ref="actionDelete"
                       type="danger"
                       size="mini"
                       icon="el-icon-remove"
                       @click="handleDelete(scope.row)"
                       v-if="scope.row.status === '0'"
                       v-hasPermi="['hr:invoice:apply:add']"></el-button>

            <el-button ref="actionView"
                       type="success"
                       size="mini"
                       icon="el-icon-view"
                       @click="handleView(scope.row)"
                       v-else
                       ></el-button>
            <el-tooltip class="item" effect="dark" content="撤回审批" placement="top"
                        v-if="scope.row.status == '10'"
                        v-hasPermi="['hr:invoice:apply:add']">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-back"
                @click="handleBack(scope.row)"></el-button>
            </el-tooltip>
            <slot name="rights" :row-data="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchKey.pageNum" :page-sizes="[10, 20, 50, 100, 200]"
                     :page-size="searchKey.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import commonMixins from '@/mixins/common'
  import filters from '@/filters/filters'
  import tagFilter from '@/filters/tagFilter'

  export default {
    name: 'SalaryTable',
    mixins: [commonMixins, filters, tagFilter],
    components: {},
    data() {
      return {
        searchKey: {},
        isExpand: true,
        tableSelectedData: [], // 选中的表数据
        listData: [] // 列表数据
      }
    },
    props: {
      data: { // 列表数据
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      totalCount: {
        type: [String, Number],
        required: true,
        default: 0
      },
      listLoading: {
        type: [Boolean],
        required: true,
        default: false
      }
    },
    computed: {
      ...mapGetters('user', [
        'userInfo'
      ]),
      actionWidth() {
        let { permissionValue, baseWidth } = {
          baseWidth: 60,
          permissionValue: ['hr:invoice:apply:add']
        }
        let width = baseWidth
        let all_permission = '*:*:*'
        let permissions = this.$store.getters.permissions
        if (permissionValue.length > 0) {
          let isAllPermission = permissions.some(permission => { // 是否全部权限
            return all_permission === permission
          })
          let existingPermissions = permissions.filter(permission => { // 存在的权限
            return permissionValue.includes(permission)
          })
          if (isAllPermission) {
            width += permissionValue.length * 60
          } else {
            width += existingPermissions.length * 60
          }
        }
        return width
      }
    },
    methods: {
      handleSizeChange(val) { // 分页改变每页条数
        this.searchKey.pageSize = val
        this.$emit('on-init', this.searchKey)
      },
      handleCurrentChange(val) { // 分页切换分页
        this.searchKey.pageNum = val
        this.$emit('on-init', this.searchKey)
      },
      handleSelectionChange(selection) { // 多选框选中数据
        this.tableSelectedData = selection
      },
      handleAdd(data = null) { // 新增按钮操作
        this.$emit('on-edit', data)
      },
      handleUpdate(data = null) { // 修改按钮操作
        let { tableSelectedData } = this
        this.$emit('on-edit', data || tableSelectedData[0])
      },
      handleDelete(data = null) { // 删除按钮操作
        let { tableSelectedData } = this
        this.$emit('on-delete', data || tableSelectedData[0])
      },
      handleView(data = null) { // 查看详情－显示弹出框
        this.$emit('on-view', data)
      },
      handleBack(data = null) {
        this.$emit('on-back', data)
      }
    },
    watch: {
      data: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
            this.listData = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
